<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
    <div id="app">
        <h1>知识点1：v-if</h1>
            <h3>v-if:v-if-else  v-else 他们中间不能有任何其他标签</h3>
            <p>例子</p>
            <h3 v-if="order==0">我是第一批</h3>
            <h3 v-else-if="order==1">我在中间</h3>
            <h3 v-else>我是垫后的第三批</h3>
            <br>
            <button @click="order=++order%3">切换</button>
        <h1>知识点2.v-show</h1>
            <p>例子</p>
            <h3 v-show="visible">1</h3>
            <h3 v-if="visible">2</h3>
            <button @click="visible=!visible">显示/隐藏</button>
            <h4>v-show是通过添加样式来实现隐藏的，v-if是通过删除标签对来隐藏的，通常情况使用v-show</h4>
        <h1>练习</h1>
            <h3>通过按钮的单击事件实现不同用户身份显示不同前端页面</h3>
            <input type="radio" value="管理员" v-model="users">管理员
            <input type="radio" value="教师" v-model="users">教师
            <input type="radio" value="学生" v-model="users">学生
            <br>
            <div v-if="users=='管理员'">
                {{users}}出去!
                <button>管理</button>
            </div>
            <div v-if="users=='教师'">
                {{users}}出去!
                <button>备课</button>
            </div>
            <div v-if="users=='学生'">
                {{users}}出去!
                <button>考试</button>
            </div>
        <h1>自主练习：选择登录方式</h1>
            <input type="radio" value="QQ登录" v-model="aaa">QQ登录
            <input type="radio" value="手机登录" v-model="aaa">手机登录
            <input type="radio" value="微信登录" v-model="aaa">微信登录
            <input type="radio" value="邮箱登录" v-model="aaa">邮箱登录
            <br>
            <div v-if="aaa=='QQ登录'">
                {{aaa}}
                <table border="1" bgcolor="#66ccff">
                    <tr>
                        <td>QQ号：</td>
                        <td><input type="text"></td>
                    </tr>
                    <tr>
                        <td>密码：</td>
                        <td><input type="text"></td>
                    </tr>
                </table>
                <button>登录</button>
            </div>
            <div v-if="aaa=='手机登录'" bgcolor="#66ccff">
                {{aaa}}
                <table border="1" >
                    <tr>
                        <td>手机号：</td>
                        <td><input type="text"></td>
                    </tr>
                    <tr>
                        <td>密码：</td>
                        <td><input type="text"></td>
                    </tr>
                </table>
                <button>登录</button>
            </div>
            <div v-if="aaa=='微信登录'" bgcolor="#66ccff">
                {{aaa}}
                <table border="1" >
                    <tr>
                        <td>微信号：</td>
                        <td><input type="text"></td>
                    </tr>
                    <tr>
                        <td>密码：</td>
                        <td><input type="text"></td>
                    </tr>
                </table>
                <button>登录</button>
            </div>
            <div v-if="aaa=='邮箱登录'" bgcolor="#66ccff">
                {{aaa}}
                <table border="1" >
                    <tr>
                        <td>邮箱号：</td>
                        <td><input type="text"></td>
                    </tr>
                    <tr>
                        <td>密码：</td>
                        <td><input type="text"></td>
                    </tr>
                </table>
                <button>登录</button>
            </div>
            
            </div>
            
    </div>        
    
</body>
</html>
<script>
    const appConn = Vue.createApp({
        data() {
            return {
              order:0,
              visible:true,
              users:'管理员',
              aaa:'手机'

            }
        }
    }).mount('#app')
</script>